<template>
  <view class="container">
    <view class="QuickMarkBox">
      <image :src="image" mode="aspectFill"></image>
      <text>长按二维码保存图片</text>
      <view class="QuickMarkBox_button" @click="saveShareImg(image)">
        保存到相册
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        image: '',
        openStatus: true 
      };
    },
    onLoad(option) {
      this.image = option.image
      // console.log(this.image)
    },
    methods: {
      // 保存到系统相册
      saveShareImg: function(canvasToTempFilePath) {
        let self = this;
        // 数据埋点点击保存海报
        self.saveId = '保存学情海报';
        // 获取用户是否开启用户授权相册
        if (!self.openStatus) {
          wx.openSetting({
            success: result => {
              if (result) {
                if (result.authSetting['scope.writePhotosAlbum'] === true) {
                  self.openStatus = true;
                  wx.saveImageToPhotosAlbum({
                    filePath: canvasToTempFilePath,
                    success() {
                      self.showShareImg = false;
                      wx.showToast({
                        title: '图片保存成功，快去分享到朋友圈吧~',
                        icon: 'none',
                        duration: 2000
                      });
                    },
                    fail() {
                      wx.showToast({
                        title: '保存失败',
                        icon: 'none'
                      });
                    }
                  });
                }
              }
            },
            fail: () => {},
            complete: () => {}
          });
        } else {
          wx.getSetting({
            success(res) {
              // 如果没有则获取授权
              if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                    self.openStatus = true;
                    wx.saveImageToPhotosAlbum({
                      filePath: canvasToTempFilePath,
                      success() {
                        self.showShareImg = false;
                        wx.showToast({
                          title: '图片保存成功，快去分享到朋友圈吧~',
                          icon: 'none',
                          duration: 2000
                        });
                      },
                      fail() {
                        wx.showToast({
                          title: '保存失败',
                          icon: 'none'
                        });
                      }
                    });
                  },
                  fail() {
                    // 如果用户拒绝过或没有授权，则再次打开授权窗口
                    self.openStatus = false;
                    // console.log('请设置允许访问相册');
                    wx.showToast({
                      title: '请设置允许访问相册',
                      icon: 'none'
                    });
                  }
                });
              } else {
                // 有则直接保存
                self.openStatus = true;
                wx.saveImageToPhotosAlbum({
                  filePath: canvasToTempFilePath,
                  success() {
                    self.showShareImg = false;
                    wx.showToast({
                      title: '图片保存成功，快去分享到朋友圈吧~',
                      icon: 'none',
                      duration: 2000
                    });
                  },
                  fail() {
                    wx.showToast({
                      title: '保存失败',
                      icon: 'none'
                    });
                  }
                });
              }
            },
            fail(err) {
              // console.log(err);
            }
          });
        }
      },
    },
  }
</script>

<style lang="scss">
  .QuickMarkBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    image {
      width: 334rpx;
      height: 334rpx;
    }

    text {
      margin-top: 42rpx;
      margin-bottom: 83rpx;
      font-size: 28rpx;
      color: rgba(61, 61, 61, .5);
    }

    .QuickMarkBox_button {
      width: 466rpx;
      height: 96rpx;
      border-radius: 43rpx;
      background-color: rgba(253, 211, 56, 1);
      color: rgba(61, 61, 61, 1);
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      line-height: 96rpx;
    }
  }
</style>
